<template>
  <div class="search-box">
    <div class="flex">
      <div>
        <el-icon>
          <Search />
        </el-icon><span>筛选搜索</span>
      </div>
      <div>
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="submitFn" type="primary">查询搜索</el-button>
      </div>
    </div>
    <div style="padding-top: 20px">
      <el-form @submit.prevent="submitFn" ref="searchFormRef" :model="queryParams">
        <el-form-item label="账号/姓名:" prop="keyword" label-width="120px">
          <el-input v-model="queryParams.keyword" style="width: 200px"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div class="add-box">
    <div>
      <el-icon>
        <Tickets />
      </el-icon>
      <span>资源列表</span>
    </div>
    <el-button type="primary" @click="addFn">添加</el-button>
  </div>
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="name" label="角色名称" />
    <el-table-column prop="description" label="描述" />
    <el-table-column prop="adminCount" label="用户数" />
    <el-table-column prop="createTime" label="添加时间">
      <template #default="scope">
        <span>{{ fomatDate(scope.row.createTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="是否启用">
      <template #default="scope">
        <el-switch v-model="scope.row.status" :active-value="1" :deactive-value="0"></el-switch>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button link type="primary" @click="router.push('/ums/allocMenu?id=' + scope.row.id)">分配菜单</el-button>
        <el-button link type="primary" @click="router.push('/ums/allocResource?id=' + scope.row.id)">分配资源</el-button>
        <el-button link type="primary" style="margin-right:10px;" @click="editFn(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <ElConfigProvider :locale="zhCn">
    <el-pagination v-model:currentPage="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
      :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      @size-change="pageSizeChagne" @current-change="currentChange" />
  </ElConfigProvider>
  <el-dialog v-model="dialogVisible" title="添加角色" width="30%" :before-close="hideDialog">
    <el-form ref="ruleFormRef">
      <el-form-item label="角色名称:" prop="name" label-width="100px">
        <el-input type="text" v-model="params.name" autocomplete="off" :minlength="300" />
      </el-form-item>
      <el-form-item label="描述:" prop="description" label-width="100px">
        <el-input type="textarea" v-model="params.description" />
      </el-form-item>
      <el-form-item label="是否启用" label-width="100px">
        <el-radio-group class="ml-4" v-model="params.status">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="sureFn"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import { user } from "@/api";
import { reactive, ref, toRefs } from "vue";
import { fomatDate } from "@/utils";
import { Search } from "@element-plus/icons-vue";
import { FormInstance } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider } from "element-plus";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const state = reactive<{
  list: IRoleModel[];
  total: number;
}>({
  list: [],
  total: 0,
});

const dialogVisible = ref(false)

let queryParams = reactive<IUserListParams>({
  keyword: "",
  pageNum: 1,
  pageSize: 10,
});

const params = reactive({
  id: 0,
  name: "",
  description: "",
  status: 0
})
const getRoleList = () => {
  user.queryRoleListApi(queryParams).then((res) => {
    if (res.code === 200) {
      state.list = res.data.list;
      state.total = res.data.total;
    }
  });
};
getRoleList();

// 重置
const searchFormRef = ref<FormInstance>();
const resetForm = () => {
  searchFormRef.value?.resetFields();
};
const submitFn = () => {
  queryParams.pageNum = 1;
  getRoleList();
};

const pageSizeChagne = () => {
  getRoleList();
};
const currentChange = () => {
  getRoleList();
};
const editFn = (row: IUserListParams) => {
  dialogVisible.value = true
  console.log(row);
  Object.assign(params, row)
  console.log(params.id);


}

const addFn = () => {
  dialogVisible.value = true
}
const hideDialog = () => {
  dialogVisible.value = false
}
const cancelFn = () => {
  dialogVisible.value = false
}
const kong = () => {
  params.description = "";
  params.id = 0;
  params.name = "";
  params.status = 0;
}
const sureFn = () => {
  console.log(params);
  if (params.id === 0) {
    user.createRoleAPI(params).then(res => {
      console.log(res);
      kong()
      dialogVisible.value = false
    })
  } else {
    user.updateRoleAPI(params.id, params).then(res => {
      console.log(res);
      kong()
      dialogVisible.value = false
    })
  }


}



const { list, total } = toRefs(state);
</script>

<style lang="less" scoped>
.search-box {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;

  .flex {
    display: flex;
    justify-content: space-between;
  }
}

// .add-box {
//   display: flex;
//   justify-content: flex-end;
//   padding: 10px;
//   margin: 20px;
//   border-radius: 10px;
//   box-shadow: 0 0 4px 2px #ccc;
// }
.add-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  margin: 20px 0;
  border-radius: 10px;
  // box-shadow: 0 0 4px 2px #ccc;
  border: 1px solid #ccc;

  .el-icon {
    top: 2px;
  }
}

:deep(.cell) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
</style>
